<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距</title>

    <style type="text/css">
        /*
            外边距：指的是当前盒子于其他盒子之间的距离，它不会影响可见框的大小，而是会影响到盒子的位置。
            这里使用margin属性，原理同内边距

            外边距也可以指定一个负值，如果外边距指定的是一个负值，则元素会向相反的方向移动

            margin值还可以设置为auto，auto值一般仅设置给水平方向的margin（水平方向即左右方向），
            如果只指定左外边距或右外边距的margin为auto时，则会将margin外边距的值设置为最大值，
            垂直方向的外边距如果设置为auto，则外边距默认为0

            如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中，所以，
            我们经常将左右外边距设置为auto以使子元素在父元素中居中

            由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果时设置右和下外边距则会改变其他盒子的位置

        */
        .box1 {
            width: 200px;
            height: 200px;
            background-color: chartreuse;
            border-bottom: coral 10px solid;/*下边框 10个px*/

            margin: 200px 0 0 200px;

        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: 0 auto;/*上下是0 水平居中*/
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>